<template>
  <div class="banner" :class="[isFlag ? 'yu-bgColor' : 'ml-2 m-r-2']">
    <!-- 一个页面展示多个卡片 slides-per-view-->
    <swiper
        :class="[isFlag ? 'w-9/12 mx-auto h-auto' : 'rounded-lg']"
        :modules="modules"
        :loop="true"
        :slides-per-view="1"
        :speed="1000"
        :autoplay="{
          delay: 3000,
          disableOnInteraction: false,
        }"
        :scrollbar="{ draggable: true }"
    >
      <swiper-slide v-for="item in bannerList" class="h-auto" :key="item.encodeId" @click="clickBanner(item)">
        <van-image class="w-full" fit="contain" :src="item.imageUrl"/>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import {ref} from 'vue'

// banner接口
import {getPcBanner} from '@/api/home/index'
// swiper
import {Scrollbar, A11y, Autoplay} from 'swiper'
import {Swiper, SwiperSlide} from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/scrollbar'
import {useRouter} from "vue-router";
import {useStore} from "@/store/index";

// banner数据
const bannerList = ref()
const router = useRouter()
const store = useStore()
// 接收父组件传递的数据
defineProps({
  isFlag: Boolean
})
const $emit = defineEmits(['setPcLoading']);


getPcBanner().then(res => {
  $emit('setPcLoading', false)
  const {code, banners} = res
  if (Number(code) === 200)
    bannerList.value = banners
})

const modules = [Scrollbar, A11y, Autoplay]

// 点击id
const clickBanner = (item) => {
  // console.log(item)
  // targetType：1歌曲 10 专辑 3000是外链
  const targetTypeObj = {

    1: () => {
      router.replace({
        path: '/pc-song-detail',
        query: {
          id: item.encodeId
        }
      })
    },
    10: () => {
      router.replace({
        path: '/collection-detail',
        query: {
          id: item.encodeId
        }
      })
    },
    3000: () => {
      window.open(item.url, '_blank')
    }
  }
  targetTypeObj && targetTypeObj[item.targetType] && targetTypeObj[item.targetType]()
  // console.log(item);
}
</script>

<style lang="scss" scoped>

</style>
